<template>
  <view class="content">
    <view class="tit">提现申请</view>
    <view class="from">
      <view class="form-item">
        <view class="form-ctrls">
          <input class="form-input" v-model="fromData.withdrawAmount" placeholder-class="form-input-placeholder" maxlength="10" placeholder="请输入提现金额" />
          <view class="btn-all" @click="handleALL">全部提现</view>
        </view>
        <view class="form-hint">
          <view class="text1">你的可提现金额 <text class="num">{{ userBonusCount }}</text> 元</view>
          <view class="text2">注：单笔≤{{sysConfig.withdraw_limit_once.value}}元，7天以内总提现金额不超过{{sysConfig.withdraw_limit_in_seven_days.value}}元</view>
        </view>
      </view>

      <view class="form-item">
        <view class="form-ctrls">
          <input class="form-input" v-model="fromData.accountName" placeholder-class="form-input-placeholder" maxlength="10" placeholder="请输入收款人姓名" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-ctrls">
          <input class="form-input" v-model="fromData.accountNum" placeholder-class="form-input-placeholder" maxlength="40" placeholder="请输入收款账号" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-ctrls">
          <input class="form-input" v-model="fromData.receiverPhone" placeholder-class="form-input-placeholder" maxlength="11" placeholder="请输入手机号码" />
        </view>
      </view>
      <view class="form-item">
        <view class="btn" @click="handleSubmit">发起申请</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed, reactive } from 'vue'
import { useStore } from 'vuex'
import { userWithdrawApplyApi, userWithdrawLastReceiverInfoApi } from '@/api/user'
const emits = defineEmits([ 'success'])
const store = useStore();
const sysConfig = computed(()=> {
  return store.state.app.config
})
const userBonusCount = computed(()=> {
  return store.state.user.userBonusCount
})
const fromData = reactive({
  accountName: '',
  accountNum: '',
  receiverPhone: '',
  withdrawAmount: '',
})
async function init(){
  store.dispatch('user/getUserBonusCount')
  const res = await  userWithdrawLastReceiverInfoApi()
  Object.assign(fromData, res)
}
init()
async function handleSubmit(){
    if(!fromData.withdrawAmount || !fromData.accountName  || !fromData.accountNum || !fromData.receiverPhone){
      uni.$u.toast(`请输入提现信息`)
      return
    }
    if(!/^1\d{10}$/.test(fromData.receiverPhone)){
      uni.$u.toast(`请输入正确的手机号码`)
      return 
    }
    if(fromData.withdrawAmount > userBonusCount.value){
      uni.$u.toast(`当前可申请提现最大金额：${userBonusCount.value}`)
      return
    }
    if(fromData.withdrawAmount > Number(sysConfig.value.withdraw_limit_once.value)) {
      uni.$u.toast(`单笔提现金额大于${sysConfig.value.withdraw_limit_once.value}`)
      return
    }
    submitData()
}
async function submitData(){
    try {    
        uni.showLoading()
        await userWithdrawApplyApi({...fromData})
        uni.$u.toast('申请成功！')
        store.dispatch('user/getUserBonusCount')
        fromData.withdrawAmount = 0
        emits('success')
    } finally {
        uni.hideLoading()
    }

}
function handleALL(){
  let val = userBonusCount.value;
  if(val > Number(sysConfig.value.withdraw_limit_once.value)) {
    val = Number(sysConfig.value.withdraw_limit_once.value)
  }
  fromData.withdrawAmount = val
}
</script>

<style lang="scss" scoped>
.content{
  width: 640rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 56rpx 40rpx;
  .tit{
    font-weight: 400;
    font-size: 36rpx;
    color: #333333;
    line-height: 44rpx;
    text-align: center;
    margin-bottom: 40rpx;
  }
  .form-item{
    margin-bottom: 40rpx;
    position: relative;
    .form-ctrls{
      display: flex;
      background: #F8F8F8;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      border: 1rpx solid #EEEEEE;
    }
    .btn-all{
      padding-right: 44rpx;
      height: 98rpx;
      line-height: 98rpx;
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
      z-index: 5;
    }
    .form-hint{
      margin-top: 24rpx;
      .text1{
        font-weight: 400;
        font-size: 22rpx;
        color: #666666;
        line-height: 32rpx;
        .num{
          color: #3662EC;
          padding: 0 8rpx;
        }
      }
      .text2{
        margin-top: 8rpx;
        font-weight: 400;
        font-size: 22rpx;
        color: #FA5151;
        line-height: 32rpx;
        padding-bottom: 16rpx;
      }
    }
    .form-input{
      flex: 1;
      height: 98rpx;
      line-height: 98rpx;
      padding: 0 32rpx;
      color: #666;
    }
   :deep(.form-input-placeholder){
      color: #DCDCDC;
    }
    .btn{
      height: 98rpx;
      background: #3662EC;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 400;
      font-size: 32rpx;
      color: #FFFFFF;
    }
  }
  .tit2{
    font-size: 24rpx;
    margin-bottom: 50rpx;
  }
  .text{
    font-weight: 400;
    font-size: 26rpx;
    color: #282828;
    line-height: 48rpx;
    text-indent: 2em;
  }
}
</style>
